<template>
  <div class="content">
    <el-form inline :model="form">
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="form.startTime"
          size="mini"
          default-time="00:00:00"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="form.endTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型">
        <el-select v-model="form.timeType" size="mini">
          <el-option label="每10分钟" value="10m"></el-option>
          <el-option label="每1小时" value="1h"></el-option>
          <el-option label="每2小时" value="2h"></el-option>
          <el-option label="每6小时" value="6h"></el-option>
          <el-option label="每12小时" value="12h"></el-option>
          <el-option label="每24小时" value="24h"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <p class="data" v-show="show">暂无数据</p>

    <div id="total" v-show="shows" style="height: 74.5vh"></div>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import { getBdDataOne } from "../../../../api/Monitoring";
export default {
  name: "CumulativeDeformationAnalysis",
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        timeType: "10m",
        startTime: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD hh:mm:ss"),
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      staticsEchart: null,
      shows: true,
      show: false,
    };
  },
  computed: {
    // deep: true,
    // immediate: true,
  },
  methods: {
    TotalAnalysis(queryData, parameter) {
      let xdata = [],
        ydata = [],
        hdata = [],
        theData = [];
      for (let j = 0; j < parameter.length; j++) {
        xdata.push(parameter[j].totalX.toFixed(3));
        ydata.push(parameter[j].totalY.toFixed(3));
        hdata.push(parameter[j].totalH.toFixed(3));
        theData.push(parameter[j].theDate);
      }
      let chartOption = {
        title: {
          text:
            this.node.name +
            "测点" +
            this.form.startTime +
            "至" +
            this.form.endTime +
            "累计变形位移图",
          left: "center",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        color: ["#00BBFF", "#66009D", "#888888"],
        legend: {
          itemHeight: 2,
          data: [
            {
              name: "WGS84-∆X",
              icon: "rect",
            },
            {
              name: "WGS84-∆Y",
              icon: "rect",
            },
            {
              name: "WGS84-∆H",
              icon: "rect",
            },
          ],
          top: 30,
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  " mm<br/>";
              }
              return tip;
            },
        },

        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: theData,
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
          },
        ],
        yAxis: [
          {
            name: "位移(mm)",
            type: "value",
          },
        ],
        color: ["#00BBFF", "#66009D", "#888888"],
        series: [
          {
            name: "WGS84-∆X",
            type: "bar",
            data: xdata,
            barWidth: 20,
          },
          {
            name: "WGS84-∆Y",
            type: "bar",
            data: ydata,
            barWidth: 20,
          },
          {
            name: "WGS84-∆H",
            type: "bar",
            data: hdata,
            barWidth: 20,
          },
        ],
        grid: {
          y2: 80,
        },
      };
      this.staticsEchart.hideLoading();
      this.staticsEchart.setOption(chartOption);
      this.staticsEchart.resize();
    },
    async search() {
      this.shows = true;
      this.show = false;
      this.staticsEchart = this.$echarts.init(document.getElementById("total"));
      this.staticsEchart.showLoading();
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
        timeType: this.form.timeType,
      };
      await getBdDataOne({
        monitorCode: this.node.monitorCode,
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        timeType: queryData.timeType,
      }).then((res) => {
        console.log(res);
        if (res.resultCode == "200") {
          this.shows = true;
          this.show = false;
          let list = res.parameter;
          this.TotalAnalysis(queryData, list);
        } else if (res.data.resultCode == "204") {
          this.shows = false;
          this.show = true;
          this.$message({
            message: "暂无数据",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
  },
  async mounted() {
    this.shows = true;
    this.show = false;
    this.staticsEchart = this.$echarts.init(document.getElementById("total"));
    this.staticsEchart.showLoading();
    let queryData = {
      startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
      timeType: this.form.timeType,
    };
    await getBdDataOne({
      monitorCode: this.node.monitorCode,
      startTime: queryData.startTime,
      endTime: queryData.endTime,
      timeType: queryData.timeType,
    }).then((res) => {
      console.log(res);
      if (res.resultCode == "200") {
        this.shows = true;
        this.show = false;
        let list = res.parameter;
        this.TotalAnalysis(queryData, list);
      } else if (res.data.resultCode == "204") {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }
    });
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
.el-form-item {
  margin-bottom: 0;
}
.data {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
</style>
